<template>
  <div>
    <div class="flex flex-wrap space-x-[50px] mb-[40px]">
      <div
        v-for="item in localDataList.slice(0, 8)"
        :key="item.iconName"
        class="flex flex-col justify-center items-center cursor-pointer"
        @click="handleItemClick(item)"
      >
        <div class="w-[40px] h-[40px] shadow-md flex justify-center items-center mb-[9px]">
          <i class="iconfont" :class="`${item.iconName} ${item.checked ? 'active' : 'noActive'}`" />
        </div>
        <div class="text-center" :class="item.checked ? 'activeLabel' : 'noActive'">
          {{ item.label }}
        </div>
      </div>
    </div>

    <div class="flex flex-wrap space-x-[50px] ml-[10px]">
      <div
        v-for="item in localDataList.slice(8)"
        :key="item.iconName"
        class="flex flex-col justify-center items-center cursor-pointer"
        @click="handleItemClick(item)"
      >
        <div class="w-[40px] h-[40px] shadow-md flex justify-center items-center mb-[9px]">
          <i class="iconfont" :class="`${item.iconName} ${item.checked ? 'active' : 'noActive'}`" />
        </div>
        <div class="text-center" :class="item.checked ? 'activeLabel' : 'noActive'">
          {{ item.label }}
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import Vue from 'vue'
interface Iitem {
  iconName: string
  label: string
  checked: boolean
}
const defaultDataList: Iitem[] = [
  {
    iconName: 'icon-tudipingzheng',
    label: '土地平整',
    checked: true,
  },
  {
    iconName: 'icon-daolu',
    label: '道路',
    checked: true,
  },
  {
    iconName: 'icon-geishui',
    label: '给水',
    checked: true,
  },
  {
    iconName: 'icon-yushui',
    label: '雨水',
    checked: true,
  },
  {
    iconName: 'icon-wushuifeishui',
    label: '污水',
    checked: true,
  },
  {
    iconName: 'icon-meiqitianranqi',
    label: '天然气',
    checked: true,
  },
  {
    iconName: 'icon-gongdian',
    label: '供电',
    checked: true,
  },
  {
    iconName: 'icon-gongre',
    label: '供热',
    checked: true,
  },
  {
    iconName: 'icon-zhengqi',
    label: '蒸汽',
    checked: false,
  },
  {
    iconName: 'icon-tongxun',
    label: '通讯',
    checked: false,
  },
  {
    iconName: 'icon-kuandai',
    label: '宽带网络',
    checked: false,
  },
  {
    iconName: 'icon-dianshi',
    label: '有线电视',
    checked: false,
  },
]
export default Vue.extend({
  components: {},
  props: {
    dataList: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {}
  },
  head: {
    title: '基础设施',
  },
  computed: {
    localDataList: {
      get() {
        if (this.dataList.length > 0) {
          // @ts-ignore
          return this.dataList
        }
        return defaultDataList
      },
      set(val: Iitem[]) {
        // @ts-ignore
        this.$emit('update:dataList', val)
      },
    },
  },

  methods: {
    handleItemClick(item: Iitem) {
      // @ts-ignore
      item.checked = !item.checked
      // @ts-ignore
      this.localDataList = [...this.localDataList]
    },
  },
})
</script>
<style lang="scss" scoped>
.active {
  @apply text-primary;
}

.noActive {
  @apply text-[#bcc0c5];
}

.activeLabel {
  @apply text-main-title;
}
</style>
